<link href="../css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/textAnnotater-0.91.js"></script>
<script type="text/javascript" src="../js/json2.js"></script>
<script type="text/javascript" src="../js/disableTextselect.js"></script>

<script>

$(document).ready(function() {
	annotaterInit("#content_annotate");
} );

var annotations;

function annotaterInit(cssSelector) {
var options = {};
options.form = '<ul><li><input type="checkbox" name="errorType" value="1" /> Interesting</li><li><input type="checkbox" name="errorType" value="2" /> Not important</li><li><textarea name="comment"></textarea></li></ul>';
options.annotations = {};
options.onInit=function(global_annotations){
	annotations = global_annotations;	
};

options.onAddAnnotation=function(addedAnnotation, global_annotations){
	/* add a Word-style comment */
	addBasicWordStyleComment(addedAnnotation);
};

options.onRemoveAnnotation=function(removedAnnotation, global_annotations){
	/* remove the Word-style comment */
	removeBasicWordStyleComment(removedAnnotation);
};

options.onSaveAnnotation=function(savedAnnotation, serializedForm){
	/* update the Word-style comment */
	updateBasicWordStyleComment(savedAnnotation);
};

$(cssSelector).textAnnotate(options);
$(cssSelector).disableTextSelect();

$('#annotationDefinitionsLoaded').val(JSON.stringify(options.annotations));
}

function save(){				
$('#annotationDefinitionsSaved').val(JSON.stringify(annotations));
alert(JSON.stringify(annotations));
}			

/**
* Adds a Word-style comment on the right of the screen
**/			 			
function addBasicWordStyleComment(annotation){
var comment = _getAnnotationComment(annotation);
	
/* get comment */
if (comment){
	/* put comment in container */
	var firstElement = $('#'+annotation[0].elementId);
	var firstElementTop  = firstElement.offset().top;
	var firstElementHeight = firstElement.height(); 
	var firstElementLeft = firstElement.offset().left;

	var commentContainer = $('<div style="position: absolute; background-color: white; border: 1px solid blue; font-size: 10pt; width: 200px"></div>');
	commentContainer.html(comment);
	$('body').append(commentContainer);
	$(commentContainer).css({"top":firstElementTop+firstElementHeight, "right": 50, "padding-left": 3});						
	var commentContainerLeft = commentContainer.offset().left;						
	
	var commentLine = $('<div style="position: absolute; border-top: 1px dashed blue; height: 1px;"></div>');
	$('body').append(commentLine);						
	$(commentLine).css({"top":firstElementTop+firstElementHeight, "left": firstElementLeft, "width":(commentContainerLeft-firstElementLeft)});
	console.log(annotations);
	
	/* store it in first element, so it can be removed */
	firstElement.data('WordStyleComment', {"container": commentContainer, "line": commentLine});
}					
}

/**
* Removes a Word-style comment on the right of the screen
**/
function removeBasicWordStyleComment(annotation){
var firstElement = $('#'+annotation[0].elementId);
var wordStyleComment = firstElement.data('WordStyleComment');
if (wordStyleComment){
	$(wordStyleComment.container).remove();
	$(wordStyleComment.line).remove();						
}
}

/**
* Updates the Word-style comment
**/			 			
function updateBasicWordStyleComment(annotation){
var firstElement = $('#'+annotation[0].elementId);				

var wordStyleComment = firstElement.data('WordStyleComment');
if (wordStyleComment==undefined) {
	addBasicWordStyleComment(annotation)
}else{					
	var comment = _getAnnotationComment(annotation);
	$(wordStyleComment.container).html(comment);
}
}

/**
* Fetches a comment from an annotation
**/			 			
function _getAnnotationComment(annotation){
var comment;
if (annotation[0]){
	var formValues = annotation[0].formValues;
	if (formValues){
		for (var i=0; i<formValues.length; i++){
			if (formValues[i].name=='comment'){
			  comment = formValues[i].value;
			  break;
			}
		}
	}
}	
return comment;	
}
</script>

<div id="content" class="left_column" style="width:65%; min-height: 380px;">
<div id="content_header">Message Details <button onclick="save()" class="awesome small green">Save Notes for Message</button></div>
	<div id="content_padded">	
			<div id="content_annotate" class="contentModule-text">
				<p>Lorem ipsum dolor sit amet, consectetur elit. Curabitur sollicitudin sagittis mauris at molestie. Fusce gravida ultricies lorem pellentesque tempor. Curabitur tristique felis vel orci ullamcorper dignissim. Phasellus tempor semper neque a fringilla. Nulla malesuada mi eu dui tempor vulputate. Ut quis erat a felis porttitor dapibus. Sed a nisi et orci pellentesque scelerisque vitae et odio. Maecenas malesuada nibh vitae augue venenatis tincidunt vel ullamcorper dolor. Fusce porta diam nec nunc cursus ullamcorper ut non neque. Nulla vel dolor turpis, id tincidunt quam. Vestibulum hendrerit eros eget dui aliquet quis fermentum ligula luctus. Integer dui mi, pulvinar nec dignissim vel, facilisis non nibh. Nulla in venenatis nulla. Etiam ac justo eget tortor ultrices posuere at non purus. Fusce eu nisl eget orci placerat pharetra. Nulla quam augue, fringilla sit amet tempor non, malesuada sit amet quam. Pellentesque mauris urna, semper ut dignissim quis, malesuada ac magna. Donec condimentum ultrices urna a accumsan. Maecenas facilisis auctor sodales. Ut quis diam eros, nec lacinia tellus.</p>
			</div>
	
		<div id="annotations">
		</div>
		
		
		
	</div>
</div>

	
<div class="right_column" style="width:34%;">
	<p>Notes you have made...</p>

</div>

<!-- end of right column -->

